<template>
  <v-row no-gutters>
    <v-col sm="2">
      <v-select
          :items="sizes"
          label="items per page"
          v-model="itemsPerPage"
      ></v-select>
    </v-col>
    <v-col sm="8">
      <v-pagination
          v-model="currentPage"
          :length="totalPages"
          :total-visible="visibleLength"
          :disabled="disabled"
      ></v-pagination>
    </v-col>
    <v-col sm="2" class="text-right">
      {{currentRange}} / {{total}}
    </v-col>
  </v-row>
</template>
<script>
  export default {
    props: {
      current: {
        type: Number,
        default: 1
      },
      pageSize: Number,
      total: Number,
      totalPages: Number,
      sizes: {
        type: Array,
        default: () => ([10, 20, 30]),
      },
      disabled: {
        type: Boolean,
        default: false
      },
      visibleLength: {
        type: Number,
        default: 6
      }
    },
    data() {
      return {
        itemsPerPage: this.pageSize,
        currentPage: this.current
      }
    },
    computed: {
      currentRange() {
        const start = (this.currentPage - 1) * this.itemsPerPage + 1;
        let end = start + this.itemsPerPage - 1;
        if (this.total < end) end = this.total;
        return start + ' - ' + end;
      }
    },
    watch: {
      currentPage() {
        this.emit();
      },
      itemsPerPage() {
        this.emit();
      }
    },
    methods: {
      emit() {
        this.$emit('page', {
          current: this.currentPage,
          pageSize: this.itemsPerPage,
        })
      }
    }
  }
</script>